<template>
  <div class="base-main">
    <van-nav-bar title="智能住房管理平台" fixed safe-area-inset-top>
      <template #right>
        <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" size="18"/>
        <span>住房维护人员</span>
      </template>
    </van-nav-bar>
    <van-cell-group class="base-content">
      <van-field
        readonly
        clickable
        :value="time"
        label="巡查日期时间"
        @click="showCalendar = false"
      />
      <van-calendar v-model="showCalendar"/>

      <van-tree-select
        :items="items"
        :active-id.sync="activeIds"
        :main-active-index.sync="activeIndex"
      />

      <van-field
        type="textarea"
        v-model="note"
        placeholder="补充说明"
        style="margin-top: 20px;"
      />

      <van-button
        round block type="info"
        style="margin-top: 20px;"
        @click="onSubmit"
      >提交</van-button>
    </van-cell-group>
    <van-tabbar v-model="active" @change="onChangeTab">
      <van-tabbar-item name="temp" icon="home-o" >巡查管理</van-tabbar-item>
      <van-tabbar-item name="temp1" icon="wap-home-o">运维信息上报</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
let date = new Date();
export default {
  name: 'temp',
  data () {
    return {
      active: 'temp',
      showCalendar:false,
      time: `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`,
      items: [
        { text: '公寓a', children: [
            {text:'1楼',id:1},
            {text:'2楼',id:2},
            {text:'3楼',id:3},
            {text:'4楼',id:4},
            {text:'5楼',id:5},
          ]},
        { text: '公寓b', children: [
            {text:'1楼',id:6},
            {text:'2楼',id:7},
            {text:'3楼',id:8},
            {text:'4楼',id:9},
            {text:'5楼',id:10},
          ]},
      ],
      activeIds: [1, 2],
      activeIndex: 0,
      note:""
    }
  },
  computed: {
  },
  methods: {
    onChangeTab(name) {
      this.$router.push(name);
    },
    onSubmit(){
      this.$notify({ type: "success", message: "提交成功"});
    }
  },
}
</script>

<style lang="less" scoped>
.base-main {
  height: 100%;
  width: 100%;
  overflow: hidden;

  .base-content {
    height: calc(100% - 96px);
    width: 100%;
    overflow: auto;
    margin: 46px 0 50px 0;
  }
}
</style>
